<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2022-04-09 21:31:31
 * @LastEditors: CoderXZ
 * @LastEditTime: 2022-05-07 15:44:50
-->
<template>
  <div class="container">
    <el-row :gutter="20" class="mgb20">
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-1">
            <i class="el-icon-office-building grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ classes }}</div>
              <div>我的班级数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-2">
            <i class="el-icon-s-check grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ signPeople }}</div>
              <div>已签约</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
          <div class="grid-content grid-con-3">
            <i class="el-icon-lx-group grid-con-icon"></i>
            <div class="grid-cont-right">
              <div class="grid-num">{{ totalPeople }}</div>
              <div>我的学生总人数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-tabs tab-position="top">
        <el-tab-pane label="学生相关">
          <!--男女比列  -->
          <el-row>
            <el-col :span="8">
              <el-card>
                <div id="chart1" style="width: 300px; height: 350px"></div>
              </el-card>
            </el-col>
            <!--签约情况  -->
            <el-col :span="8">
              <el-card>
                <div id="chart2" style="width: 300px; height: 350px"></div>
              </el-card>
            </el-col>
            <!-- 学生状态 -->
            <el-col :span="8">
              <el-card>
                <div id="myMap" ref="myMap" style="width: 400px; height: 350px"></div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="意向分析">
          <Analysis2></Analysis2>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
  <!-- 基于准备好的dom, -->
</template>

<script>
import Analysis2 from "@/components/page/Analysis2";
import { getAnalyze } from "../../api/analyze.js";
import PieChart from "@/components/my/PieChart";
import Pie2Chart from "@/components/my/Pie2Chart";
import ColumnChart from "@/components/my/ColumnChart";
import WorldCloud from "@/components/my/WorldCloud";
import chinaChart from "@/components/my/chinaChart";

export default {
  components: {
    PieChart,
    Pie2Chart,
    ColumnChart,
    WorldCloud,
    chinaChart,
    Analysis2,
  },
  mounted() {
    var myChart1 = this.$echarts.init(document.getElementById("chart1"));
    var option1 = {
      title: {
        text: "男女比例",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: "50%",
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    var myChart2 = this.$echarts.init(document.getElementById("chart2"));
    var option2 = {
      title: {
        text: "签约情况",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "",
          type: "pie",
          radius: "50%",
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    var chart = this.$echarts.init(document.getElementById("myMap"), "macarons");
    var mapOption = {
      backgroundColor: "#FFFFFF",
      title: {
        text: "学生生源地分布",
        x: "center",
      },
      tooltip: {
        trigger: "item",
      },

      //左侧小导航图标
      visualMap: {
        show: true,
        x: "left",
        y: "left",
        splitList: [
          { start: 500, end: 600 },
          { start: 400, end: 500 },
          { start: 300, end: 400 },
          { start: 200, end: 300 },
          { start: 100, end: 200 },
          { start: 0, end: 100 },
        ],
        color: ["#5475f5", "#9feaa5", "#85daef", "#74e2ca", "#e6ac53", "#9fb5ea"],
      },

      //配置属性
      series: [
        {
          name: "人数:",
          type: "map",
          mapType: "china",
          roam: true,
          label: {
            normal: {
              show: true, //省份名称
            },
            emphasis: {
              show: false,
            },
          },
          data: [], //数据
        },
      ],
    };
    getAnalyze()
      .then((result) => {
        if (result.status == "200") {
          option1.series[0].data = result.data.sexRatio;
          option2.series[0].data = result.data.haveSigned;
          mapOption.series[0].data = result.data.provinces;
          myChart1.setOption(option1);
          myChart2.setOption(option2);
          chart.setOption(mapOption);
        }
      })
      .catch((err) => {});
  },
  created() {
    getAnalyze()
      .then((result) => {
        if (result.status == "200") {
          this.classes = result.data.classes;
          this.totalPeople = result.data.totalPeople;
          this.haveSigned = result.data.haveSigned;
          this.signPeople = result.data.signPeople;
        }
      })
      .catch((err) => {});
  },
  methods: {},
  data() {
    return {
      classes: null,
      totalPeople: null,
      signPeople: null,
    };
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}
</style>
